<template>
  <div class="wrap" @dblclick="resetMap">
    <div class="bar1" ref="crosswise"></div>
  </div>
</template>
<script>
import mixinData from "../utils/mixin.js"
// 引入中文转换拼音方法
import getProvinceMapInfo from "../../public/static/map.js";
export default {
  //mixin混入
  mixins:[mixinData],
  methods: {
    async getData() {
      // 2.获取业务数据
      let res = await this.$http.get("CropCoverage");
      this.data = res.data.content;
      this.getEcharts();
    },
    async getEcharts() {
      //创建echarts实例
      this.echarts = this.$echarts.init(this.$refs.crosswise, this.themeName);
      //1.获取绘制地图的经纬度数据
      let { data } = await this.$http.get(
        "http://localhost:8080/static/map/china.json"
      );
      //注册中国地理经纬度数据 并起别名
      this.$echarts.registerMap("china", data);

      //设置配置项
      let option = {
        title: {
          text: "▍各地区农作物覆盖面积",
        },
        series: [
          {
            type: "map",
            map: "china", //地图数据别名
            data: this.data,
            center:undefined,
            roam: true, //开启漫游模式
            zoom: 1.2, //缩放比例
            label: {
              show: false,
            },
            top:"17%"
          },
        ],
        //数据映射配置
        visualMap: {
          calculable: true, //是否显示拖拽手柄
          inRange: {
            color: ["orange", "orangered"], //映射面积颜色
          },
          text: ["High", "Low"], //两端文本
          //位置
          bottom: "2%",
          left: "3%",
        },
      };
      this.echarts.setOption(option);
      //监听切换省份
      this.echarts.on("click", async (info) => {
        let { name, path } = getProvinceMapInfo(info.name);
        //获取省份地址数据
        let { data } = await this.$http.get("http://localhost:8080" + path);
        //注册省份数据
        this.$echarts.registerMap(name, data);
        //绘制省份地图
        this.echarts.setOption({
          series: [
            {
              map: name,
              zoom: 0.9,
              center: undefined, //视觉中心点
              itemStyle: {
                areaColor: "orange", // 设置面积的填充颜色
              },
              label: {
                show: true,
              },
            },
          ],
        });
      });

      this.resize();
    },
    resize() {
      // 获取一个比例尺
      let width = this.$refs.crosswise.offsetWidth;
      // 3.5-3.7
      let scale = (width / 100) * 3.6;
      // 根据比例尺动态设置标题
      let updateOption = {
        title: {
          textStyle: {
            fontSize: scale,
          },
        },
      };
      this.echarts.setOption(updateOption);
      this.echarts.resize();
    },
    //还原地图
    resetMap(){
      this.echarts.setOption({
        series:[
          {
            map:"china",
            zoom:1.2,
            center:undefined,
            label:{
              show:false
            }
          }
        ]
      })
    }
  },
  mounted() {
    this.getData();
    //一进来就监听窗口变化
    window.addEventListener("resize", this.resize);
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
    this.echarts.off("click")
  },
};
</script>
<style scoped>
</style>